<template>
  <div>
    <el-dialog
      title="订单信息"
      :visible.sync="dialogVisible"
      width="700px"
      v-if="dialogVisible"
    >
      <div v-loading="loading">
        <div class="description" v-if="orderDatalist">
          <div class="title">收货信息</div>
          <div class="acea-row">
            <div class="description-term">
              用户昵称：{{ orderDatalist.nickname }}
            </div>
            <div class="description-term">
              收货人/订购人：{{ orderDatalist.real_name }}
            </div>
            <div class="description-term">
              联系电话：{{ orderDatalist.user_phone }}
            </div>
            <div class="description-term">
              身份证号：{{ orderDatalist.user_card }}
            </div>
            <div class="description-term">
              收货地址：{{ orderDatalist.user_address }}
            </div>
          </div>
          <el-divider />
          <div class="title">订单信息</div>
          <div class="acea-row">
            <div class="description-term">
              订单编号：{{ orderDatalist.order_sn }}
            </div>
            <!-- <div class="description-term">
              第三方订单号：{{ orderDatalist.thrid_order_sn }}
            </div> -->
            <div
              v-if="orderDatalist.order_type === 0 && !orderDatalist.pay_time"
              class="description-term"
            >
              订单状态：待付款
            </div>
            <div
              v-if="orderDatalist.order_type === 0 && orderDatalist.pay_time"
              class="description-term"
            >
              订单状态：{{ orderDatalist.status | orderStatusFilter }}
            </div>
            <div class="description-term">
              商品总数：{{ orderDatalist.total_num }}
            </div>
            <div class="description-term">
              商品总价：{{ orderDatalist.total_price }}
            </div>
            <div class="description-term">
              交付邮费：{{ orderDatalist.pay_postage }}
            </div>
            <!-- <div class="description-term">
              优惠券金额：{{ orderDatalist.coupon_price }}
            </div> -->
            <div class="description-term">
              实际支付：{{
                orderDatalist.finalOrder
                  ? parseFloat(orderDatalist.finalOrder.pay_price) +
                    parseFloat(orderDatalist.pay_price)
                  : orderDatalist.pay_price
              }}
            </div>
            <!-- <div v-if="orderDatalist.integral > 0" class="description-term">
              积分抵扣：使用了{{ orderDatalist.integral }}个积分，抵扣了{{
                orderDatalist.integral_price
              }}元
            </div> -->
            <div
              v-if="orderDatalist.give_integral > 0"
              class="description-term"
            >
              赠送积分：{{ orderDatalist.give_integral }}个
            </div>
            <div class="description-term">
              创建时间：{{ orderDatalist.create_time }}
            </div>
            <div class="description-term">
              支付方式：{{ orderDatalist.pay_type | payTypeFilter }}
            </div>
            <!-- <div class="description-term">
              一级佣金：{{
                parseFloat(orderDatalist.refund_extension_one)
                  ? parseFloat(orderDatalist.extension_one) +
                    parseFloat(orderDatalist.refund_extension_one)
                  : parseFloat(orderDatalist.extension_one)
              }}
              <em
                v-if="orderDatalist.refund_extension_one > 0"
                style="color: red;font-style: normal;"
                >(-{{ orderDatalist.refund_extension_one }})</em
              >
            </div> -->
            <div class="description-term">
              商家备注：{{ orderDatalist.mark }}
            </div>
          </div>
          <template>
            <el-divider />
            <div class="title">操作记录</div>
            <el-table
              v-loading="LogLoading"
              border
              :data="tableDataLog.data"
              style="width: 100%"
            >
              <el-table-column
                prop="order_id"
                align="center"
                label="订单ID"
                min-width="80"
              />
              <el-table-column
                prop="change_message"
                label="操作记录"
                align="center"
                min-width="280"
              />
              <el-table-column
                prop="change_time"
                label="操作时间"
                align="center"
                min-width="280"
              />
            </el-table>
            <div class="block">
              <el-pagination
                :page-sizes="[20, 40, 60, 80]"
                :page-size="tableFromLog.limit"
                :current-page="tableFromLog.page"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableDataLog.total"
                @size-change="handleSizeChangeLog"
                @current-change="pageChangeLog"
              />
            </div>
          </template>
          <template v-if="orderDatalist.delivery_type === '1'">
            <el-divider />
            <div class="title">物流信息</div>
            <div class="acea-row">
              <div class="description-term">
                快递公司：{{ orderDatalist.delivery_name }}
              </div>
              <div class="description-term">
                快递单号：{{ orderDatalist.delivery_id }}
                <el-button
                  type="primary"
                  size="mini"
                  style="margin-left: 5px"
                  @click="openLogistics"
                  >物流查询</el-button
                >
              </div>
            </div>
          </template>
          <template v-if="orderDatalist.delivery_type === '2'">
            <el-divider />
            <div class="title">配送信息</div>
            <div class="acea-row">
              <div class="description-term">
                送货人姓名：{{ orderDatalist.delivery_name }}
              </div>
              <div class="description-term">
                送货人电话：{{ orderDatalist.delivery_id }}
              </div>
            </div>
          </template>
          <template v-if="orderDatalist.mark">
            <el-divider />
            <div class="title">用户备注</div>
            <div class="acea-row">
              <div class="description-term">{{ orderDatalist.mark }}</div>
            </div>
          </template>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="物流查询"
      :visible.sync="dialogLogistics"
      width="350px"
      :before-close="handleClose"
      v-if="dialogLogistics"
    >
      <div class="logistics acea-row row-top">
        <div class="logistics_img">
          <img src="@/assets/images/expressi.jpg" />
        </div>
        <div class="logistics_cent">
          <span>物流公司：{{ orderDatalist.delivery_name }}</span>
          <span>物流单号：{{ orderDatalist.delivery_id }}</span>
        </div>
      </div>
      <div class="acea-row row-column-around trees-coadd">
        <div class="scollhide">
          <el-timeline>
            <el-timeline-item v-for="(item, i) in result" :key="i">
              <p class="time" v-text="item.time" />
              <p class="content" v-text="item.status" />
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getExpress, orderDetailApi, orderLogApi } from "@/api/order";
export default {
  name: "OrderDetail",
  data() {
    return {
      dialogVisible: false,
      dialogLogistics: false,
      loading: false,
      order_id: "",
      tableFromLog: {
        page: 1,
        limit: 10
      },
      tableDataLog: {
        data: [],
        total: 0
      },
      LogLoading: false,
      result: [],
      orderDatalist: null
    };
  },
  mounted() {},
  methods: {
    onOrderDetails(id) {
      this.order_id = id;
      this.loading = true;
      orderDetailApi(id)
        .then(res => {
          this.orderDatalist = res.data;
          this.tableDataLog.total = res.data.total;
          this.loading = false;
        })
        .catch(({ message }) => {
          this.loading = false;
          this.$message.error(message);
        });
    },
    openLogistics() {
      this.getOrderData();
      this.dialogLogistics = true;
    },
    handleClose() {
      this.dialogLogistics = false;
    },
    // 订单记录
    onOrderLog(id) {
      this.dialogVisible = true;
      this.LogLoading = true;
      orderLogApi(id, this.tableFromLog)
        .then(res => {
          this.tableDataLog.data = res.data.list;
          this.tableDataLog.total = res.data.count;
          this.LogLoading = false;
        })
        .catch(res => {
          this.$message.error(res.message);
          this.LogLoading = false;
        });
    },
    pageChangeLog(page) {
      this.tableFromLog.page = page;
      this.onOrderLog(this.order_id);
    },
    handleSizeChangeLog(val) {
      this.tableFromLog.limit = val;
      this.onOrderLog(this.order_id);
    },
    // 获取订单物流信息
    getOrderData() {
      getExpress(this.orderDatalist.order_id)
        .then(async res => {
          this.result = res.data;
        })
        .catch(res => {
          this.$message.error(res.message);
        });
    }
  }
};
</script>

<style scoped lang="scss">
.title {
  margin-bottom: 16px;
  color: #17233d;
  font-weight: 500;
  font-size: 14px;
}

.description {
  &-term {
    display: table-cell;
    padding-bottom: 10px;
    line-height: 20px;
    width: 50%;
    font-size: 12px;
  }
}

.logistics {
  align-items: center;
  padding: 10px 0px;

  .logistics_img {
    width: 45px;
    height: 45px;
    margin-right: 12px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .logistics_cent {
    span {
      display: block;
      font-size: 12px;
    }
  }
}

.trees-coadd {
  width: 100%;
  height: 400px;
  border-radius: 4px;
  overflow: hidden;

  .scollhide {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-left: 18px;
    padding: 10px 0 10px 0;
    box-sizing: border-box;

    .content {
      font-size: 12px;
    }

    .time {
      font-size: 12px;
      color: #2d8cf0;
    }
  }
}

.scollhide::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}
</style>
